<template>
  <n-modal v-model:show="isVisible" title="编辑促销活动" preset="dialog" @close="onClose" @update:show="onClose" style="height: 415px;width: 700px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px;margin-left: 20px">
        <n-form-item label="活动名称：" path="name">
          <n-input v-model:value="form.name" placeholder="请输入活动名称"/>
        </n-form-item>
        <n-form-item label="规则：" path="rule" style="margin-left: 20px">
          <n-input v-model:value="form.rule" placeholder="请输入规则"  style="width: 180px"/>
        </n-form-item>
        <n-form-item label="折扣力度：" path="promotionRate" style="margin-left: 20px">
          <n-input v-model:value="form.promotionRate" placeholder="请输入折扣力度" style="width: 180px"/>
        </n-form-item>
      </div>

      <div class="form-row">
        <n-form-item label="店铺：" path="shopId" style="margin-left: 20px">
          <n-select v-model:value="form.shopId"
                    placeholder="请选择店铺"
                    filterable
                    clearable
                    :options="shopOptions"
                    style="width: 280px"
          ></n-select>
        </n-form-item>
        <n-form-item label="指定产品：" path="storeCommodityId" style="margin-left: 20px">
          <n-select v-model:value="form.storeCommodityId"
                    placeholder="请选择产品"
                    filterable
                    clearable
                    :options="storeCommodityOptions"
                    style="width: 280px"
          ></n-select>
        </n-form-item>
      </div>
      <div style="display: flex">
        <n-form-item label="开始时间：" path="startTime" style="margin-left: 20px">
          <n-date-picker
              v-model:formatted-value="startTime"
              placeholder="请选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 280px;"
          />
        </n-form-item>
        <n-form-item label="结束时间：" path="endTime" style="margin-left: 20px">
          <n-date-picker
              v-model:formatted-value="endTime"
              placeholder="请选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 280px"
          />
        </n-form-item>
      </div>
      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>

import {onMounted, ref, watch} from 'vue';
import {useRouter} from 'vue-router';
import {useUserStore} from "@/store/index.js";
import api from '@/api/admin'
import {List} from "echarts";

const loading = ref(true)
const userStore = useUserStore()
const id = userStore.getId();
const router = useRouter()
const products=ref([])
const stores=ref([])
const admins=ref([])
const emit = defineEmits(['updatePage'])
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
  },
  shopOptions: {
    type: Array,
    require: true
  },
  storeCommodityOptions: {
    type: Array,
    require: true
  },
  attribute: {
    type: Object,
    required: true,
  }
});

const isVisible = ref(props.show);
watch(() => props.show, (newVal) => {
  isVisible.value = newVal;
  if (newVal) {
    // 当对话框显示时，将传递过来的属性值填充到表单中
    form.value = {...props.attribute};
    startTime.value = props.attribute.startTime;
    endTime.value = props.attribute.endTime;
  }
});
const form = ref({
  shopId: '',
  storeCommodityId: '',
  name: '',
  price: '',
  promotionRate: '',
});
const startTime = ref(null)
const endTime = ref(null)

const handleSubmit = async () => {
  try {
    const sTime = startTime.value.toString()
    const eTime = endTime.value.toString()
    const res = await api.updateSalePromotionActivity(
        {
          ...form.value,
          adminId: id,
          startTime: sTime,
          endTime: eTime
        }
    )
    if (res.code === 200) {
      emit("updatePage")
    }
    else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("添加促销活动失败！")
  }finally{
    clear()
    props.onClose();
  }
};
const clear = () => {
  form.value.shopId = null
  form.value.storeCommodityId = null
  form.value.name=""
  form.value.price=""
  form.value.promotionRate=""
  startTime.value=null
  endTime.value=null
}
</script>
<style scoped>
  .form-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
  }

  .form-row {
      display: flex;
      align-items: center;
      width: 100%;
  }

  .form-row > n-form-item {
      flex: 1;
  }

  .submit-row {
      justify-content: center;
      display: flex;
      width: 100%;
  }
</style>
